<template>
  <div :class="classes || ''" class="bg-white-6 column shadow-1 border-8 q-pa-md">
    <div class="row items-center text-subtitle1 text-bold">
      {{ $t('AGVCore.NotificationAlarm') }}
      <q-space></q-space>
      <q-btn icon="local_fire_department" outline text-color="indigo-14" @click="handleHeatMap">
        {{ $t('MapCore.HeatMap') }}
      </q-btn>
    </div>
    <q-separator class="q-my-sm"></q-separator>
    <q-tabs v-model="currentTab" active-color="indigo-14" align="justify" class="relative-position" dense>
      <q-tab v-for="col in columns" :key="col.name" class="rounded-borders" v-bind="col"></q-tab>
      <q-separator class="absolute-bottom full-width"></q-separator>
    </q-tabs>
    <q-tab-panels v-model="currentTab" animated class="bg-transparent col full-width">
      <q-tab-panel v-for="col in columns" :key="col.name" class="no-padding fit overflow-hidden" v-bind="col">
        <component :is="col.component"></component>
      </q-tab-panel>
    </q-tab-panels>
  </div>
  <AlarmHeatMap v-model="heatMapVisible"></AlarmHeatMap>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import AbnormalTasks from 'pages/Dashboard/Console/AbnormalTasks.vue'
import AlarmHeatMap from 'pages/Dashboard/Console/AlarmHeatMap.vue'
import AMRWarning from 'pages/Dashboard/Console/AMRWarning.vue'
import { computed, ref } from 'vue'

defineProps({ classes: String })
const currentTab = ref('alarm')
const heatMapVisible = ref(false)
const columns = computed(() => {
  return [{
    label: `${i18n.t('AGVCore.CriticalAlarm')}`, name: 'alarm', component: AMRWarning
  }, {
    label: `${i18n.t('TaskCore.AbnormalTask')}`, name: 'task', component: AbnormalTasks
  }]
})

const handleHeatMap = () => {
  heatMapVisible.value = true
}
</script>